在前面两篇文章中，我们介绍了如何对 webpack 进行优化以提升开发体验和构建产物。webpack 无疑是功能强大的构建工具，但是也因为其繁琐的配置项饱受诟病，甚至网友调侃出“webpack配置工程师”这样的岗位。那么本篇文章讲给大家介绍一种新思想：no-bundle 构建方案，也就是无包构建。

# 什么是 no-bundle 构建

在《常见构建工具及对比》中，我们介绍了为什么在现代前端项目需要构建这个环节，并且对比了常见的几种构建工具。在过去的几年中，以 webpack 为主的构建工具无疑占据着主流地位。其核心思想是从一个或多个入口文件开始，根据入口文件递归寻找出依赖文件，然后构建出一个依赖图，最后将你项目中所需的每一个模块组合成一个或多个 bundles，然后在浏览器中加载处理好的 bundles。

webpack 在构建过程中提供了编译、代码效验、文件优化、自动化测试等强大的功能。但也因为如此所以大大增加我们现在 web 开发的复杂性。特别是我们在本地开发的时候，webpack 也会将模块打包为浏览器可读的 js 代码，需要将整个项目都重新构建一遍。项目越大，构建速度就会越慢。

在 bundle 构建时期，主要想解决的问题有以下几点：

• 模块化的兼容性问题
• 模块过多导致频繁发送请求影响性能问题

随着技术的发展，上面这些问题或多或少都已经得以解决，比如 HTTP2 的普及大大提高了浏览器对于并发请求的处理；并且现代浏览器普遍都已经支持 ESM 模块。所以前端工程师们又有了新的使命：探索怎么能够简化构建过程提升构建效率。在此背景下，no-bundle 构建方案就孕育而生了。

no-bundle 构建的思想是在构建的时候只处理模块的编译而无需打包，把模块间的依赖关系交给浏览器处理。浏览器加载模块入口之后，进行依赖分析，再通过网络请求加载被依赖的模块。

# JavaScript modules 模块

在《模块化》这部分中，我们带大家一起回顾了 JS 模块化发展的过程。在早期的时候，JS 往往被用来执行独立的脚本任务，简单且体量小。但是随着前端发展，时至今日，我们需要在项目中运行大量的 JS 代码。所以将 JS 拆分为可按需导入的独立模块成为日益明显的需求。

在社区中慢慢出现了一系列的模块化解决方案。CommonJS、AMD、CMD 等。在 ES2015（ES6） 中，官方终于在语言标准层面上实现了模块的功能，并且是浏览器和服务端都支持的模块化解决方案。no-bundle 无包构建的发展就得益于浏览器原生支持模块功能。

由于现代浏览器本身就支持 ES Module，会自动向依赖的Module发出请求。no-bundle 充分利用这一点，简化构建时需要处理的过程，提升构建效率。

# Vite

在了解了什么是 no-bundle 构建之后，我们再来看看具体的应用。

相信一提到 no-bundle 构建工具，大家第一个想到的就应该是 Vite。Vite 是我们熟悉的 Vue 的作者尤雨溪在开发 Vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 Vue3 的宣传中对 Vite 赞不绝口。在 Vite 的官网，我们可以看到对其的介绍是: 下一代前端开发与构建工具。可见对其寄予厚望。

Vite 主要从以下两方面提升开发体验：

• 在开发时提供开发服务器，基于原生 ESM 提供丰富的内建功能。首次启动以及在模块热更新上速度快到惊人。
• 针对生产环境使用 Rollup 进行打包代码，输出高可用资源。

也就是在开发环境使用浏览器自带的模块处理能力处理构建过程，只编译不打包，而在生产环境下再使用 Rollup 打包的这种方式，理论上即提高了开发效率，也能够保证生产环境的代码要求。

# Vite 原理

下面我们就带大家来看下 Vite 的原理。

在前面的文章中我们也有讲到，在 bundle 构建时期，例如 webpack 这样的构建工具会从入口文件出发，依次查找文件，生成一个庞大的依赖关系图(dependency graph)，其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

不管是在开发调试还是打包上线的阶段，都会先将你的项目文件打包为一个个的 bundle，进行全量构建。有的同学会说，不是还有懒加载吗？懒加载是发生在项目运行时候的优化手段，在构建的阶段，webpack 还是会将这部分提前构建好的。在项目越来越大的时候，本地开发项目的启动就会越来越慢，达到分钟级别也不足为奇。同时修改代码后的热更新时间也会增加。Vite 为了解决这个问题，使用了浏览器的原生 ESM，并且使用了预编译和 esbuild。

下面我们来具体操作体会下 Vite 的魅力，我们按照姿势一步一步来进行操作，首先我们使用 Vite 来创建一个 Vue 项目（注意 node 版本需要 >= 12.0.0）：

$ npx create-vite-app my-vue-app -- --template vue
npx: 7 安装成功，用时 16.216 秒
Scaffolding project in /Users/workspace/self/my-vue-app...

Done. Now run:

  cd my-vue-app
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

创建完毕之后，再按照提示依次执行一下命令来打来项目、安装依赖并启动项目：

// 进入到项目目录
cd my-vue-app

// 安装依赖
npm install

// 启动项目
npm run dev